import React, { Component } from 'react';
import { Button, Modal, message, Row, Col } from 'antd';
import api from '../../../api/api';
import { markIdCard } from '../../../utils';

/* 激活问询弹窗 */
class ActivateModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      order: props.orderInfo,
      nesData: [],
      resultTitle: props.title,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      order: nextProps.orderInfo,
    });
  }

  // 激活反馈弹窗
  activateResult() {
    const { order, resultTitle } = this.state;
    let styles = {
      label: {
        textAlign: 'right',
      },
      row: {
        minHeight: '30px',
      },
    };
    return (
      <Modal
        title={resultTitle}
        width={600}
        visible={this.props.show}
        style={{ backgroundColor: '#f8f8f8' }}
        maskClosable={false}
        onCancel={() => this.props.onCancel()}
        footer={
          <Button onClick={() => this.props.onCancel()} type="primary">
            确定
          </Button>
        }
      >
        <Row gutter={10} style={styles.row}>
          <Col style={styles.label} span={8}>
            服务单编号：
          </Col>
          <Col span={16}>{order.orderNo}</Col>
        </Row>
        <Row gutter={10} style={styles.row}>
          <Col style={styles.label} span={8}>
            服务对象姓名：
          </Col>
          <Col span={16}>{order.insuredName}</Col>
        </Row>
        <Row gutter={10} style={styles.row}>
          <Col style={styles.label} span={8}>
            服务对象身份证号：
          </Col>
          <Col span={16}>{markIdCard(order.insuredIdCard)}</Col>
        </Row>
        {this.state.resultTitle === '激活成功' && this.state.nesData.length ? (
          <div style={{ backgroundColor: '#fff', padding: 10 }}>
            <p style={{ fontSize: 16, textAlign: 'center' }}>注意事项</p>
            {this.state.nesData.map((i, key) => {
              return (
                <div key={key}>
                  <strong>{i.key + '、' + i.answerTitle || ''}</strong>
                  {i.answer.map((i) => {
                    return (
                      <p key={i.code} style={{ lineHeight: '30px', textAlign: 'left' }}>
                        {i.result || i.name}
                      </p>
                    );
                  })}
                </div>
              );
            })}
          </div>
        ) : null}
      </Modal>
    );
  }

  render() {
    return <div>{this.props.show ? this.activateResult() : null}</div>;
  }
}

export default ActivateModal;
